﻿<html>
<head>
<script type="text/javascript" src="script/jquery.mobile-1.0b1/jquery-1.6.2.js"></script>
<style>
html {
  background: #BBD3E2;
}
div {
display: block;
}


.login-logo {
  text-align: center;
  padding: 20px;
}
.fm-item {
margin-bottom: 8px;
}
input[type="text"], input[type="password"], input[type="search"], input[type="tel"] {
border: #A5A9B1 solid 1px;
background: -webkit-gradient(linear, left top, left 5, from(#DAD9D9), to(white));
display: block;
width: 100%;
padding: 14px 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 5px;
border-radius: 5px;
text-indent: 0.8em;
}
.layout-flex {
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
}
.btn-ok {
height: 49px;
background-color: rgba(255, 177, 37, 0);
border-color: rgba(255, 177, 37, 0);
border-width: 10px 11px 15px 11px;
-webkit-border-image: url(images/border-btn-ok.png) 10 11 15 11 stretch stretch;
color: white;
text-shadow: 0 0 1px #993200;
}

.btn {
-webkit-border-radius: 4px;
border-raidus: 4px;
-webkit-text-shadow: 0 0 1px white;
text-shadow: 0 0 1px white;
font-size: 18px;
display: block;
width: 100%;
cursor: pointer;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

form {
display: block;
}

#id_body {
  width: 300px;
}

</style>
<script>
$().ready(function() {
   // alert(document.body.scrollWidth);

   // $('#id_body').attr('width', screen.width);

   window.scrollTo(0,1);
});
</script>
</head>
<body id="id_body" >
<header>
<div class="login-logo"><h2>Huawei NetEco</h2></div>
</header>
<section class="box-alpaha pd-lr10">
<form>
<div class="fm-item">
<input type="text" placeholder="用户名" name="logonId" ></input>
</div>
<div class="fm-item">
<input type="password" placeholder="登录密码" name="password" ></input>
</div>
<section>
<input type="submit" value="登录" class="flex btn btn-ok"></input>
</section>
</form>
</section>
</body>
</html>
